<template>
  <div class="log_item_container">
    <el-image class="userhead" :src="headUrl"></el-image>
    <div class="log_discription">
      <div class="log_discription_row1">
        <el-button link>{{ user?.name }}</el-button>
        <div class="discription">{{ log?.description }}</div>
        <el-button link>{{ logEntity?.name }}</el-button>
      </div>
      <div class="log_discription_row2">
        <div class="log_time">{{ date }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { User, ClassLog, Class, Exam, ExamLog } from '../types/mytypes'
import { devUrl } from '../request/MyAxios'
import {mysqlTimeToMyDate} from '../tools/mysqlTool'
export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>
    },
    log: {
      type: Object as PropType<ClassLog|ExamLog>
    },
    logEntity: {
      type: Object as PropType<Class|Exam>
    }
  },
  data() {
    return {
      headUrl: devUrl + this.user?.head,
      date:''
    }
  },
  mounted() {
    this.date = mysqlTimeToMyDate(this.log?.date as string);
  }
})
</script>

<style scoped lang="scss">
.log_item_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.5em;
  .userhead {
    height: 2.5em;
    margin-right: 0.5em;
  }

  .log_discription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .log_discription_row1 {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
    }

    .log_discription_row2 {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      box-sizing: border-box;

      .log_time {
        box-sizing: border-box;
        padding: 3px;
        font-size: 0.8em;
      }
    }

    .discription {
      font-size: 0.9em;
    }
  }

}
</style>